<template>
  <div class="top-bar-wrapper header">
    <div class="main-top-bar top-bar-lang-en">
      <div class="top-bar-left-section">
        <div class="top-bar-logo">
          <img class="logo" src="@/assets/images/logo.png">
        </div>
        <div class="top-menus">
          <el-dropdown style="margin-left: 20px;" @command="selectLayout" trigger="click">
            <el-button type="text">
              布局<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="view in layouts" :key="view.type" :command="view.type">{{view.name}} <i style="color: #faad14" class="el-icon-check" v-show="currentLayout == view.type"></i></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="top-bar-center-section"></div>
      <div class="top-bar-right-section">
        <button @click="saveToServer" class="top-bar-btn top-bar-button-preview">
          <span class="label">
            保存
            <i class="iconfont icon-save"></i>
          </span>
        </button>
        <!-- <button @click="publish" class="top-bar-btn top-bar-btn-publish top-bar-edit-mode-last-btn">
          <span class="label">
            <i class="iconfont icon-publish"></i>发布</span>
        </button> -->
      </div>
    </div>
    <el-popover ref="popover4" placement="right" width="180" trigger="click">
      <el-form :model="Setting" size="mini" label-width="90px">
        <el-form-item label="智能参考线">
          <el-switch @change="onSettingChange($event, 'line')" :value="Setting.line"></el-switch>
        </el-form-item>
        <el-form-item label="参考线颜色">
          <el-color-picker @change="onSettingChange($event, 'color')" :value="Setting.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="吸附效果">
          <el-switch @change="onSettingChange($event, 'sorb')" :value="Setting.sorb"></el-switch>
        </el-form-item>
      </el-form>
    </el-popover>

    <el-dialog title="接口数据" :visible.sync="dialogApiTplVisible">
      <el-form  ref="dataForm" :model="dataForm" :rules="dataFormRule">
        <el-form-item label="模板名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="dataForm.title" autocomplete="off" @change="getAlias"></el-input>
        </el-form-item>
        <el-form-item label="模板别名" :label-width="formLabelWidth" prop="alias">
          <el-input v-model="dataForm.alias" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请求数据接口" :label-width="formLabelWidth" prop="index_url">
          <el-input v-model="dataForm.index_url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="提交数据接口" :label-width="formLabelWidth" prop="ajax_url">
          <el-input v-model="dataForm.ajax_url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注说明" :label-width="formLabelWidth" prop="note">
          <el-input v-model="dataForm.note" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面类型" :label-width="formLabelWidth" prop="template_type">
          <el-select v-model="dataForm.template_type" placeholder="请选择">
              <el-option label="treeTable" value="tree"> </el-option>
              <el-option label="分页Table" value="table"> </el-option>
              <el-option label="表单" value="form"> </el-option>
              <!-- <el-option label="弹出表单" value="alert"> </el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-select v-model="dataForm.status" placeholder="请选择">
              <el-option label="禁用" value="0"> </el-option>
              <el-option label="启用" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示底部" :label-width="formLabelWidth" prop="status">
          <el-switch v-model="dataForm.is_footer" active-text="是" inactive-text="否"> </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogApiTplVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus">
.top-bar-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  background: #212020;
  box-shadow: inset 0 -1px 1px 0 #000;

  .menu {
    top: -5px;
    border: none;
  }

  .menu-text {
    font-size: 14px;
  }

  .main-top-bar {
    display: flex;
    display: flex;
    justify-content: space-between;
    height: 48px;
    position: relative;
    width: 100%;
    min-width: 600px;
    top: 0;
    left: 0;
    z-index: 1450;
    transition: 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) top;

    .top-bar-left-section {
      display: flex;
      height: 100%;

      .top-bar-logo {
        display: flex;
        height: 100%;
        align-items: center;
        padding-left: 12px;
        box-sizing: border-box;
        font-weight: bold;

        .logo {
          height: 80%;
        }
      }

      .top-menus {
        display: flex;
        height: 100%;
        align-items: center;
        padding-right: 12px;
        box-sizing: border-box;
      }

      .top-bar-menu-bar-wrapper {
        padding-left: 18px;
        display: flex;
      }

      .top-bar-menu-bar-item {
        font-size: 14px;
        position: relative;
        cursor: pointer;
        float: left;
        height: 48px;
        line-height: 48px;
        padding: 0 18px;
        text-align: center;
        transition: color 0.1s ease;
        white-space: nowrap;
      }
    }

    .top-bar-center-section {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .top-bar-right-section {
      display: flex;

      .top-bar-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        cursor: pointer;
        padding: 0 20px;
        box-sizing: border-box;
        outline: none;
        border: 0;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        background-color: #212020;
        color: #fff;

        &:hover {
          background-color: #000000;
        }

        &.top-bar-btn-publish {
          background-color: #262626;

          &:hover {
            background-color: #000000;
          }
        }
      }
    }
  }
}

.el-dropdown-item.is-disabled {
  pointer-events: auto;
  cursor: not-allowed;
}
</style>

<script type="text/ecmascript-6">
import BaseComponent from '@/widgets/extend/BaseComponent'
import common from '@/assets/js/common'
import { mapState } from 'vuex'
import {addInfo,editInfo} from '@/api/tpl';
import vPinyin from '@/utils/vue-py'


export default {
  mixins: [BaseComponent],
  components: {},
  name: 'Myheader',
  props: ['layout-data'],
  data() {
    return {
      dialogApiTplVisible:false,
      formLabelWidth:'120px',
      dataForm:{
            title:'',
            alias:'',
            template_type:'form',
            index_url:'',
            ajax_url:'',
            template_content:[],
            status:'1',
            is_footer:false
      },
      dataFormRule:{
        title: [ { required: true, message: "请输入模板名称", trigger: ["blur" ,"change"] } ],
        alias: [ { required: true, message: "请输入模板别名", trigger: ["blur" ,"change"] } ],
        // index_url: [ { required: true, message: "请输入请求数据接口连接", trigger: ["blur" ,"change"] } ],
        template_content: [ { required: true, message: "你还没有创建页面模板", trigger: ["blur" ,"change"] } ],
      },
      setting: {
        open: true, // 网格开关
        line: true, // 智能参考线显示
        color: '#409EFF', // 参考线颜色
        phoneline: true, // 手机框
        sorb: true, // 是否拖拽吸附
        
      }
    }
  },
  computed: {
    ...mapState({
      widgets: state => state.viewOption.widgets,
      layouts: state => state.viewOption.layouts,
      currentLayout: state => state.viewOption.currentLayout,
      fields: state => state.fields,
      tableField: state => state.tableField,
      leftButtonField: state => state.leftButtonField,
      rightButtonField: state => state.rightButtonField,
      subFromField: state => state.subFromField,
    })
  },
  mounted() {
    
  },
  methods: {
    onSettingChange(v, k) {
      this.$store.dispatch('SettingChange', { [k]: v })
    },
    onToolCommand(command) {
      switch (command) {
        case 'allToPx':
          this.ema.fire('allToPx')
          break
      }
    },
    //发布
    publish() {
      // window.Editor.publish()
    },
    getAlias:function() {
        this.dataForm.alias = vPinyin.chineseToPinYin(this.dataForm.title);
        return false;
    },
    //保存
    saveToServer:  function () {

      

      let types = this.$route.query.types;
      let template_content = this.fields;
      let storeName = 'addTabsField';
      if(types == 2) {
        storeName = 'addTableField';
        var obj = {
            searchForm:this.fields,
            table:this.tableField,
            leftButton:this.leftButtonField,
            rightButton:this.rightButtonField,
        };
        template_content = obj;
        this.dataForm.template_type = 'table';
      }

      if(JSON.stringify(this.subFromField) != '{}') {
          this.dataForm = JSON.parse(JSON.stringify(this.subFromField));
          this.$store.commit(storeName,{});
      }
      
      
      
      this.dataForm.template_content = template_content;
      console.log(this.dataForm)
      // if(!this.dataForm.template_content || !this.dataForm.template_content.length) {
      //   this.$message({
      //       message: '你还没有创建页面模板内容',
      //       type: 'error'
      //   });
      //   return false;
      // }
      this.dialogApiTplVisible = true;
      // window.Editor.saveToServer()
    },
    async updateData(){
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          var res;
          if(this.dataForm.id) {
            res = await editInfo(this.dataForm);
          }else{
            res = await addInfo(this.dataForm);
          }
          if(res && res.code==200) {
            this.dialogApiTplVisible = false;
            this.$message({
                message: res.msg,
                type: 'success'
            });
            this.$router.go(0);
          }
        }
        return false;
      })
      
    },
    selectLayout(layout) {
      this.$store.dispatch('setCurrentLayout', layout)
    },
    preview: function () {
      // var urlInfo = common.parseURL(window.location.href)
      // var key = urlInfo.params && urlInfo.params.key
      // const open = () => {
      //   if ((/desktop/i).test(this.Setting.phoneSize.name)) {
      //     const win = window.open(`${Config.VIEW_PATH}${this.demoMode ? '__demomode' : key}?preview=1`)
      //     return window.setTimeout(() => this.postData(win), 1000)
      //   }
      //   this.openDialog({ name: 'd-Preview', data: { key } })
      // }
      // if (this.demoMode) open()
      // else this.ema.fire('pageInfo.save', true, open)
    },
    revocation: function () {
      this.ema.fire('history.back')
    },
    forward: function () {
      this.ema.fire('history.forword')
    },
    save: function () {
      this.ema.fire('pageInfo.save')
    },
    psd: function () {
      this.ema.fire('pageInfo.psd')
    },
    postData(previewWindow) {
      const content = window.localStorage.getItem('EditorautoSave_tmp')
      previewWindow.postMessage({ type: 'preview', content: content, canvas: this.$store.state.setting.phoneSize }, '*')
    }
  }
}
</script>

